<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>其他</title>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="blue">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="description" content="履保科技">
		<meta name="Keywords" content="履保科技">
	</head>
	<body>
		<div class="mains">
			<style>
				[v-cloak]{display: none;}
				input{border:none;outline: none;min-width: 50px;}
				i,em,b{font-style: normal;}
				.flex{display: flex;align-items: center;}
				.flex.b{justify-content: space-between;}
				.flex.c{justify-content: center}
				.fz15{font-size: 15px;}
				*{margin: 0; padding: 0;box-sizing: border-box}
			  img {width: 100%; border-style: none; vertical-align: top;}
			  a{text-decoration: none;-webkit-tap-highlight-color: rgba(255, 0, 0, 0);}
			  li{list-style: none;}
			  body{font-size: 0.28rem;color: #333;}
			  .mainCont{max-width: 500px; margin:0 auto;position: relative;min-height: 100vh;background: #f5f5f5;}
			  .topimg{
				width: 100%;
			  }
			  .con>div{background: #fff;border-radius: 0.1rem;min-height: 5rem;}
			  .area2{
				padding: 5px 20px 20px;
			  }
			  .inpItem{
				border-bottom: 1px solid #f0f0f0;
			  }
			  .tips{
				  font-size:.3rem;
				  padding-top: .3rem;
				  height: auto;
				  padding: .3rem .3rem;
				  color: #ed6a0c;
				  background-color: #fffbe8;
			  }
			  .url{
				  width: 100%;
				  word-wrap:break-word;
				  padding: .2rem 0;
				  margin-top: .3rem;
			  }
			  .login{
				background: #229e7f;
				color: #fff;
				line-height: 0.76rem;
				font-size: 0.32rem;
				text-align: center;
				display: block;
				margin-top: 1.5rem;
				border-radius: 50px;
			  }

				.mask {
					position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
					z-index: 1002; left: 0px;
					opacity:0.5; -moz-opacity:0.5;
					display:none;
				}
</style>
			<div class="mainCont" id="app">
				<div>
					<div class="tips">
						提示：请复制链接，前往电脑端使用浏览器打开进行操作
					</div>
					<div class="con">
						<div class="area2">
							<div class="inpItem">
								<div class="url" id="copyUrl" th:text="${url}"></div>
							</div>
							<a class="login" href="javascript:;" id="submit">复制链接</a>
						</div>
					</div>
				</div>
			</div>
			<div id="mask" class="mask"></div>
			<script th:src="@{/static/js/jquery/jquery-3.2.1.min.js}"></script>
			<script type="text/javascript">
				$(function() {
					var aEle = document.querySelector('#submit');
					aEle.addEventListener('click',function(){
						var copyDOM = document.querySelector('#copyUrl');  
						var range = document.createRange();  
						range.selectNode(copyDOM);
						window.getSelection().addRange(range);
						var successful = document.execCommand('copy');  
						try {  
							var msg = successful ? 'successful' : 'unsuccessful';  
							// console.log('Copy email command was ' + msg);  
							alert("复制成功！")
						} catch(err) {  
							console.log('复制失败');  
						}
						window.getSelection().removeAllRanges();
					},false);
					// function showMask() {
					// 	$("#mask").css("height", $(document).height());
					// 	$("#mask").css("width", $(document).width());
					// 	$("#mask").show();
					// }

					// function hideMask() {
					// 	$("#mask").hide();
					// }
				});
			</script>
			<script>
				;
				(function(doc, win) {
					// 分辨率Resolution适配
					var docEl = doc.documentElement,
						resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
						recalc = function() {
							var clientWidth = docEl.clientWidth;
							if (!clientWidth) return;
							if (clientWidth > 500) clientWidth = 500;
							docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
						};
					// 如果浏览器不支持addEventListener，则中止
					if (!doc.addEventListener) return;
					win.addEventListener(resizeEvt, recalc, false);
					doc.addEventListener('DOMContentLoaded', recalc, false);

				})(document, window);
			</script>
		</div>
	</body>
</html>
